<div style="padding:20px;">
    <div id="dituiuser" v-cloak>
        <div style="background:#FFF;padding-top:20px;margin-bottom:10px;padding-left:10px;display:flex;">
            <div style="flex:1;">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input v-model="formInline.name" placeholder="请地推员姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="formInline.phone" placeholder="地推员手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="formInline.remark" placeholder="地推员备注"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search('yes')">查询</el-button>
                        <el-button @click="search('no')">全部</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div style="width:200px;text-align: right;padding-right:10px;">
                <el-button type="danger" @click="dialogFormVisible=true">添加地推员</el-button>
            </div>
        </div>

        <el-empty v-if="tableData.length==0" description="无数据，请添加推广员"></el-empty>
        <el-table v-else :data="tableData" style="width: 100%">
            <el-table-column label="头像" width="80">
                <template slot-scope="scope">
                    <div>
                        <el-image style="width:40px; height:40px; border-radius:50%;" :src="scope.row.ds_headerimg" >
                        </el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="姓名" width="120">
                <template slot-scope="scope">{{scope.row.ds_truename}}</template>
            </el-table-column>
            <el-table-column label="UID/手机号" width="200">
                <template slot-scope="scope">
                    <div>UID: <span style="color:#00F;">{{scope.row.ds_userid}}</span></div>
                    <div>{{scope.row.ds_mobile}}</div>
                </template>
            </el-table-column>
            <el-table-column label="添加时间" width="300">
                <template slot-scope="scope">
                    <div style="color:#888;">昵称：{{scope.row.ds_nikename}}</div>
                    <div>{{scope.row.ds_addtime}}</div>
                </template>
            </el-table-column>
            <el-table-column label="备注">
                <template slot-scope="scope">{{scope.row.ds_remark}}</template>
            </el-table-column>
            <el-table-column label="操作" width="130">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="handleEdit(scope.$index, scope.row)">备注</el-button>
<!--                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <div style="text-align:right;background:#FFF;padding:20px 0;margin-top:0px;">
        <el-pagination
                background
                layout="total,prev, pager, next"
                :total="totalItems"
                :page-size="pageSize"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage">
        </el-pagination>
        </div>

        <el-dialog title="添加地推员" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogFormVisible" width="30%">
            <el-form>
                <el-input v-model="sellerId" placeholder="请输入地推员ID号" autocomplete="off"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button :disabled="butajaxing" type="primary" @click="addSeller">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="地推员备注" :visible.sync="remarkBoxShow" width="30%">
            <el-form>
                <el-input type="textarea" :rows="5" v-model="remarkTxt" placeholder="请输入地推员备注" autocomplete="off"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="remarkBoxShow = false">取 消</el-button>
                <el-button :disabled="butajaxing" type="primary" @click="runBeizhu">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>

<script>
    var _theData = <?php echo json_encode($data); ?>;
    console.log(_theData);
    //alert(BASE_URL+"***"+STORE_URL);
    new Vue({
        el: '#dituiuser',
        data: {
            test:'aaaaaaaaaaaa',
            butajaxing:false,
            sellerId:"",
            formInline: {
                name: '',
                phone: '',
                remark: '',
            },
            dialogFormVisible:false,
            remarkBoxShow:false,
            remarkTxt:'',
            nowDsId:0,
            nowRowCnt:0,
            tableData: _theData.list,
            currentPage: 1,
            pageSize: PAGESIZE,     //PAGESIZE
            totalItems: _theData.allNum // 假设总共有100条记录
        },
        methods: {
            addSeller(){
                var _this = this;
                var _sellerId = $.trim(this.sellerId);
                if(_sellerId==''){
                    //this.$alert('请输入地推员ID号');
                    this.$message.error('请输入地推员ID号');
                }
                else{
                    this.butajaxing = true;
                    $.post('/index.php?s=/store/ditui.Dtseller/addSeller', {"sellerId": _sellerId}, function (_res) {
                        console.log('aaaaa', _res, _res.code)
                        _this.butajaxing = false;
                        if(_res.code==0){
                            _this.$message.error(_res.msg);
                        }
                        else{
                            _this.$message({
                                message: _res.data.msg,
                                type: 'success'
                            });
                            _this.dialogFormVisible = false
                            //重新获取地推人员列表
                            _this.search('no');
                        }
                    })
                }
            },
            runBeizhu(){
                var _this = this;
                var newBz = $.trim(this.remarkTxt);
                if(newBz==""){
                    this.$message.error('备注不能为空');
                }
                else{
                    this.butajaxing = true;
                    $.post('/index.php?s=/store/ditui.Dtseller/addRemark', {"dsId":this.nowDsId, "remarkTxt": newBz}, function (_res) {
                        console.log('aaaaa', _res, _res.code)
                        _this.butajaxing = false;
                        if(_res.code==0){
                            _this.$message.error(_res.msg);
                        }
                        else{
                            _this.$message({ message: _res.data.msg, type: 'success' });
                            _this.remarkBoxShow = false
                            _this.tableData[_this.nowRowCnt]['ds_remark'] = newBz;
                            _this.$set(_this.tableData, _this.nowRowCnt, _this.tableData[_this.nowRowCnt]);
                        }
                    })
                }
            },
            search(key) {
                // 这里应该添加逻辑来过滤数据
                // console.log('搜索:', this.formInline);
                if(key=="no"){
                    this.formInline = {name: '', phone: '', remark: ''};
                }
                this.currentPage = 1;
                this.loadTableData();
            },
            handleEdit(index, row) {
                this.remarkTxt = row.ds_remark;
                this.remarkBoxShow = true;
                this.nowDsId = row.ds_id;
                this.nowRowCnt = index;
                console.log(index, row);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                // 更新当前页码后，重新加载数据
                this.loadTableData();
            },
            loadTableData() {
                var _this = this;
                $.post('/index.php?s=/store/ditui.Dtseller/index', {"isAjax":"yes",
                    "currentPage":this.currentPage, "pageSize": this.pageSize,
                    "formInline":this.formInline}, function (_res) {
                    _this.tableData = _res.data.list;
                    _this.totalItems = _res.data.allNum;
                })
            }
        }
    });
</script>